<!--  Line 分割线 - 属性面板 -->
<template>
  <div class="inputAttr">
    <div class="content">
      <div class="title">
        {{ attributeset.lab }}
      </div>
      <div v-if="attributeset.data" class="list">
        <div class="lab">字段标题：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.title"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="lab">占位文案：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.placeholder"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">表单宽度：</div>
          <div class="slider">
            <t-slider v-model="attributeset.data.width" size="small" />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">线条宽度：</div>
          <div class="slider">
            <t-slider
              v-model="attributeset.data.height"
              :min="1"
              :max="10"
              size="small"
            />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">线条类型：</div>
          <div class="slider">
            <t-select v-model="attributeset.data.type" size="small">
              <t-option
                v-for="item in lineOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </t-select>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">显示标题：</div>
          <div><t-switch v-model="attributeset.data.isShowTitle" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">隐藏组件：</div>
          <div><t-switch v-model="attributeset.data.isShow" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">颜色：</div>
          <div>
            <t-color-picker v-model="attributeset.data.color" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'

const props = defineProps({
  arrtData: Object
})

let attributeset = reactive({ ...props.arrtData })

// 处理列的调整宽度
const widthChange = (val) => {
  switch (val) {
    case '1':
      attributeset.data.width = 100
      break
    case '2':
      attributeset.data.width = 50
      break
    case '3':
      attributeset.data.width = 33.3
      break
    case '4':
      attributeset.data.width = 25
      break
  }
}

const lineOptions = [
  { value: 'solid', label: '实线' },
  { value: 'dashed', label: '虚线' },
  { value: 'dotted', label: '圆点虚线' },
  { value: 'double', label: '双线' }
  // { value: 'groove', label: '点杠虚线' },
  // { value: 'ridge', label: '实线' },
  // { value: 'inset', label: 'inset' },
  // { value: 'outset', label: 'outset' }
]

// 接收父级的方法
const emit: Function = defineEmits(['changeAttrHandle'])
// 同步调整attributeset
watch(
  () => props.arrtData,
  (val) => {
    attributeset = { ...val }
  },
  { deep: true }
)
// 监听整个表单的输入
watch(
  () => attributeset,
  (val) => {
    emit('changeAttrHandle', val)
  },
  { deep: true }
)
</script>
<style src="../../index.less" scoped></style>
